<!-- 组件说明 -->
<template>
  <div class="havebottombar purseIndex">
    <goback :targetUrl="gobackTargetUrl" :title="'Edit'"></goback>
    <div class="container clearfix">
      <div class="top">
        <div class="userPic">
          <img v-if="userStoreData.avatar" :src="userStoreData.avatar" />
          <img v-else :src="defaultPic" />
        </div>
        <p v-if="false" @click.stop="changeHeaderPic" class="nickName">
          {{ userStoreData.nickName ? userStoreData.nickName : "----" }}
        </p>
        <img
          v-if="ifLoginFn()"
          @click.stop="changeHeaderPic"
          class="rightBtnWhite"
          :src="rightbtn"
          alt=""
        />
      </div>
      <div class="center">
        <div class="content">
          <div class="li" @click.stop="contentFn('nickName')">
            <div class="left">
              <p>nickName</p>
            </div>
            <div class="right">
              <p>{{ userStoreData.nickName }}</p>
              <img class="rightbtn" :src="rightbtn" />
            </div>
          </div>
          <div class="li" @click.stop="contentFn('userName')">
            <div class="left">
              <p>userName</p>
            </div>
            <div class="right">
              <p>{{ userStoreData.userName }}</p>
              <img class="rightbtn" :src="rightbtn" />
            </div>
          </div>
          <div class="li" @click.stop="contentFn('Email')">
            <div class="left">
              <p>Email</p>
            </div>
            <div class="right">
              <p>{{ userStoreData.email }}</p>
              <img class="rightbtn" :src="rightbtn" />
            </div>
          </div>
          <div class="li" @click.stop="contentFn('Age')">
            <div class="left">
              <p>Age</p>
            </div>
            <div class="right">
              <p>{{ userStoreData.age }}</p>
              <img class="rightbtn" :src="rightbtn" />
            </div>
          </div>
          <div class="li" @click.stop="contentFn('Gender')">
            <div class="left">
              <p>Gender</p>
            </div>
            <div class="right">
              <p>
                {{
                  userStoreData.sex == 1
                    ? "male"
                    : userStoreData.sex == 2
                    ? "female"
                    : "--"
                }}
              </p>
              <img class="rightbtn" :src="rightbtn" />
            </div>
          </div>
        </div>
        <!--        昵称录入-->
        <van-popup v-model="nickNameIptIfShow">
          <div class="nickNameIptWrap">
            <p>New nickname</p>
            <input
              class="nickNameIpt"
              type="text"
              v-model.trim="nickNameIVal"
              :placeholder="contentArrary[0].params"
            />
            <van-button class="btn" type="default" @click="nickNameConfirm"
              >Confirm</van-button
            >
          </div>
        </van-popup>
        <!--       用户名 录入-->
        <van-popup v-model="userNameIptIfShow">
          <div class="nickNameIptWrap">
            <p>Your userName</p>
            <p class="title-tips">Real name of bank card used for withdrawal</p>
            <input
                class="nickNameIpt"
                type="text"
                v-model.trim="userNameVal"
                :placeholder="contentArrary[3].params"
            />
            <van-button class="btn" type="default" @click="userNameConfirm"
            >Confirm</van-button
            >
          </div>
        </van-popup>
        <!--       邮箱录入-->
        <van-popup v-model="emailIptIfShow">
          <div class="nickNameIptWrap">
            <p>New Email</p>
            <p class="title-tips">Email used for withdrawal</p>
            <input
                class="nickNameIpt"
                type="text"
                v-model.trim="emailVal"
                :placeholder="contentArrary[4].params"
            />
            <van-button class="btn" type="default" @click="emailConfirm"
            >Confirm</van-button
            >
          </div>
        </van-popup>
        <!--        age录入-->
        <van-picker
          title="Age"
          show-toolbar
          :columns="ageArr"
          v-if="ageValIfShow"
          @confirm="ageConfirm"
          @cancel="ageValIfShow = false"
          confirm-button-text="Done"
          cancel-button-text="cancel"
        />
        <!--        性别录入-->
        <van-picker
          title="Sex"
          show-toolbar
          :columns="sexArr"
          v-if="sexValIfShow"
          @confirm="sexConfirm"
          @cancel="sexValIfShow = false"
          confirm-button-text="Done"
          cancel-button-text="cancel"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ifLogin, utilGotoLogin } from "@/utils/index.js";
import { mapState } from "vuex";

export default {
  components: {
    // compSep
  },
  name: "percenterEdit",
  data() {
    return {
      nickName: "Visitor",
      rightbtn: require("@/assets/imgNews/percenter/rightbtn.png"),
      rightBtnWhite: require("@/assets/imgNews/percenter/rightBtnWhite.png"),
      defaultPic: require("@/assets/imgs/index/defaultPic.png"),
      contentArrary: [
        {
          imgIcon: "",
          title: "nickName",
          params: ""
        },
        {
          imgIcon: "",
          title: "Age",
          params: ""
        },
        {
          imgIcon: "",
          title: "Gender",
          params: ""
        },
        {
          imgIcon: "",
          title: "userName",
          params: ""
        },
        {
          imgIcon: "",
          title: "Email",
          params: ""
        },
      ],
      sexArr: ["male", "female"],

      uploadpicUrl: "", // 上传返给我的头像图片地址

      nickNameIptIfShow: false,
      nickNameIVal: "",
      userNameIptIfShow: false,
      userNameVal: "",
      emailIptIfShow: false,
      emailVal: "",
      ageValIfShow: false,
      ageVal: "",
      sexValIfShow: false,
      sexVal: ""
    };
  },
  computed: mapState({
    // 箭头函数可使代码更简练
    userStoreData: state => state.user,
    ageArr() {
      let num = 120;
      let ageArrNew = [];
      for (let i = 0; i < num; i++) {
        ageArrNew.push(i + 1);
      }
      return ageArrNew;
    },
    gobackTargetUrl(){
      console.log(this.$route.query);
      // console.log(this.$route.query.redirect);
      if(this.$route&& this.$route.query&&this.$route.query.redirect){
        return this.$route.query.redirect
      }
      return '';
    }
  }),
  methods: {
    ageConfirm(val) {
      this.ageValIfShow = false;
      this.ageVal = val;
      this.userUpdateUserinfoFn("age");
    },
    sexConfirm(val) {
      this.sexValIfShow = false;
      this.sexVal = val == "male" ? 1 : val == "female" ? 2 : "";
      this.userUpdateUserinfoFn("sex");
    },
    nickNameConfirm() {
      if (this.nickNameIVal) {
        this.nickNameIptIfShow = false;
        this.userUpdateUserinfoFn("nickName");
      }
    },
    userNameConfirm() {
      if (this.userNameVal) {
        this.userNameIptIfShow = false;
        this.userUpdateUserinfoFn("userName");
      }
    },
    emailConfirm() {
      if (this.emailVal) {
        this.emailIptIfShow = false;
        this.userUpdateUserinfoFn("email");
      }
    },
    initShow() {
      this.nickNameIptIfShow = false;
      this.userNameIptIfShow = false;
      this.emailIptIfShow = false;
      this.ageValIfShow = false;
      this.sexValIfShow = false;
    },
    userUpdateUserinfoFn(type) {
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      this.api.userController
        .userUpdateUserinfo({
          age: type === "age" ? this.ageVal : this.userStoreData.age,
          avatar:
            type === "avatar" ? this.uploadpicUrl : this.userStoreData.avatar,
          nickName:
            type === "nickName"
              ? this.nickNameIVal
              : this.userStoreData.nickName,
          userName:
              type === "userName"
                  ? this.userNameVal
                  : this.userStoreData.userName,
          email:
              type === "email"
                  ? this.emailVal
                  : this.userStoreData.email,
          sex: type === "sex" ? this.sexVal : this.userStoreData.sex,
          phone: this.userStoreData.phone,
          userId: this.userStoreData.userId
        })
        .then(res => {
          this.$toast.clear();
          if (res.data.code == 200) {
            this.$store.dispatch("syncUserInfo").then(() => {
              console.log(this.$store.state);
              setTimeout(() => {
                this.userStoreDataShow();
                this.initShow();
                this.$forceUpdate();
              }, 0);
            });
          }
        });
    },
    userStoreDataShow() {
      this.contentArrary[0].params = this.userStoreData.nickName
        ? this.userStoreData.nickName
        : "---";
      this.contentArrary[1].params = this.userStoreData.age
        ? this.userStoreData.age
        : "0";
      this.contentArrary[2].params = this.userStoreData.sex
        ? this.userStoreData.sex
        : "--";
      this.contentArrary[3].params = this.userStoreData.userName
          ? this.userStoreData.userName
          : "---";
      this.contentArrary[4].params = this.userStoreData.email
          ? this.userStoreData.email
          : "---";
    },
    gotoEdit() {
      this.$router.push({
        name: "percenterEidt"
      });
    },
    ifLoginFn() {
      return ifLogin();
    },
    headerClickFn() {},
    gotoLogin() {
      utilGotoLogin();
    },
    // 修改头像
    changeHeaderPic() {
      // alert(11111111);
      if (window.StepSDK) {
        window.StepSDK.uploadImage(this.userStoreData.userId+','+this.userStoreData.token);
      }
    },
    contentFn(title) {
      if (!ifLogin()) {
        utilGotoLogin();
      } else {
        console.log(title);
        this.initShow(); //隐藏所有弹窗
        if (title === "nickName") {
          this.nickNameIptIfShow = true;
        } else if (title === "Age") {
          this.ageValIfShow = true;
        } else if (title === "Gender") {
          this.sexValIfShow = true;
        } else if (title === "userName") {
          this.userNameIptIfShow = true;
        } else if (title === "Email") {
          this.emailIptIfShow = true;
        }
      }
    },
    pageinit() {
      // this.get_inforeward();
      // this.get_inforewardtop10();
    },
    // 路有跳转
    goto(name) {
      this.$router.push({
        name
      });
    },
    fnstop() {
      return false;
    }
  },
  mounted() {
    this.pageinit();
    window.setImageUrl = url => {
      alert("图片上传地址 url=" + url);
      this.uploadpicUrl = url;

      this.userUpdateUserinfoFn("avatar");
    };
    this.userStoreDataShow();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
@import url("./../../../assets/css/common.less");
@import url("./percenter-edit.less");
</style>
